<template>
  <div id="my1">

</div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods:{
    mycharts() {
      // 初始化组件
      var mychart = this.$echarts.init(document.getElementById('my1'));
      //绘制图表
      mychart.setOption({
        // 标题
        title:{
          text:'Echarts入门示例'
        },
        //提升框组件  专门配置提升框的
        tooltip: {
          //触发类型
          trigger: 'axis',
          //坐标轴指示器配置
          axisPointer: {
            type: 'cross'  //指示器样式
          }},
        // 工具栏
        toolbox: {
          feature: {
            //动态类型切换
            magicType:{
              type:['line','bar']
            },
            //数据视图工具
            dataView: {
              show:true,
              readOnly: false
            },
            //保存为图片的配置
            saveAsImage: {
              show: true
            },
            //配置项还原
            restore: {show: true}
        }
        },
        // 标记
        legend:{
          data:['实体查询','电子查询']
        },
        //配置x轴
        xAxis: {
          //坐标轴类型
          type: 'category',
          //配置类目名单
          data: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
          //配置 鼠标移入显示
          axisPointer: {
            show:true,  //show 必须写，开关的作用
            type:'shadow'
          }
        },
        // 配置y轴
        yAxis: [
          {
            type: 'value',  //坐标轴类型
            name: '实体查询',  //名称
            min: 0,           //最小值
            max: 100,         //最大值
            interval: 10,     // 列数
            axisLabel:{       //坐标轴刻度标签的
              formatter: '{value}人'  //字符名称
            }
          }
        ],
        series: [
          {
            name: '实体查阅',
            type: 'bar',
            data: [15,32,45,21,48,96,51,32,12,42,32,12],
            itemStyle:{
             color: '#91c7ae'
            }
          },{
            name: '电子查阅',
            type: 'line',
            data: [52,12,84,65,32,15,43,46,75,65,45,87],
            itemStyle: {
              color: '#546570'
            }
          }
        ],
        color: ['#CCC', '#AFA', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']
      })
      window.addEventListener('resize',()=>{
        mychart.resize();
      })
    }
  },
  mounted() {
    this.mycharts()
  }
}
</script>

<style>
@media (max-width:767px) {
  #my1 {
    width: 500px;
    height: 200px;
    margin: auto;
  }
  }
  @media (min-width:768px) {
    #my1 {
      width: 600px;
      height: 300px;
      margin: auto;
    }
  }
  @media (min-width:900px) {
    #my1 {
      width: 700px;
      height: 400px;
      margin: auto;
    }
  }
  @media (min-width:1200px) {
    #my1 {
      width: 800px;
      height: 500px;
      margin: auto;
    }
  }
</style>
